import { Link } from '@brillout/docpress'
import { CommunityNote } from '../../components'

<CommunityNote url="https://grpc.io" />

There are no gRPC client for the browser.
(Protocol Buffers does not support the browser.)

This means you cannot call gRPC endpoints directly from the browser;
you always need to call gRPC endpoints from your Node.js server.

For fetching data,
you can simply use a <Link text={<code>onBeforeRender()</code>} href="/data-fetching" /> hook,
since `onBeforeRender()` hooks are called in Node.js.

For mutating data:
1. You create a new HTTP endpoint. For example, if you use [Express.js](https://github.com/expressjs/express):
   ```js
   // Environment: server

   import express from 'express'

   const app = express()
   app.use(express.json()) // Parse the HTTP request body as JSON

   app.post('/mutations/updateText', (req, res) => {
     const { text } = req.body
     // Call gRPC endpoints here
   })
   ```
2. You then call your HTTP endpoint from the browser.
   ```js
   // Environment: client

   const body = JSON.stringify({ text: 'Some new text' })
   await fetch('/mutations/updateText', { body })
   ```
